<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="box">
    <el-select
      v-if="selectType == 2 || selectType == 3"
      v-model="data.databaseName"
      placeholder="请选择源库"
      size="small"
      style="width: 240px"
    >
      <el-option
        v-for="dict in nodeTypeOptions"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select>
    <el-select
      v-if="selectType == 1 || selectType == 3"
      v-model="data.dataSchema"
      placeholder="请选择schema"
      size="small"
      style="width: 240px; margin-left: 15px"
    >
      <el-option
        v-for="dict in selectType == 1 ? nodeTypeOptions : schemaSelectData"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select>
    <!-- <el-select
      v-model="data.taskMode"
      placeholder="请选择指定模式"
      size="small"
      style="width: 240px; margin-left: 15px"
    >
      <el-option
        v-for="dict in selectTaskMode"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
      />
    </el-select> -->

    <el-button
      type="primary"
      size="small"
      style="width: 80px; margin-left: 15px"
      @click.prevent="obtainTable"
    >查询</el-button>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 15px"
      height="350px"
      border
      append
    >
      <el-table-column v-if="taskWay == 1" type="selection" width="55" />
      <el-table-column label="库名称" width="180" prop="schema" />
      <el-table-column prop="name" label="对象名称" width="240" />
      <el-table-column
        prop="classfiy"
        :filters="this.classfiy"
        label="对象类型"
        show-overflow-tooltip
        :filter-method="filterHandler"
      />
      <el-table-column prop="rows" label="行数" show-overflow-tooltip />
      <el-table-column prop="comment" label="描述" show-overflow-tooltip />
    </el-table>
  </div>
</template>
<script>
import Vue from 'vue'

import {
  databaseListObjects,
  databaseListDatabaseAndSchema
} from '@/api/console/datasourceInfo.js'

export default {
  dicts: ['appraise_taskmode'],
  props: ['data'],
  data() {
    return {
      loading: false,
      nodeTypeOptions: [],
      dialogVisible: true,
      nodeType: '',
      tableData: [],
      form: {
        taskTables: []
      },
      taskWay: null,
      taskMode: [],
      selectMode: null,
      classfiy: [],
      selectType: 0,
      schemaSelectData: [],
      selectTaskMode: []
    }
  },
  /**
   *  this.$props.data.taskWay  1:可选 2:全选并不可选
   */
  async created() {},
  mounted() {
    this.loading = true
    this.taskWay = this.$props.data.taskWay
    this.getDicts('appraise_taskmode').then((res) => {
      res.data.forEach((f) => {
        this.classfiy.push({
          text: f.dictLabel,
          value: f.dictValue
        })
      })
    })
    this.$emit('getTaskMode', this.selectTaskMode)
    this.gainBaseSelect()
  },
  methods: {
    async gainBaseSelect() {
      const { start, databaseName, databaseId, dataSchema } = this.$props.data
      let res = await this.getDicts('datasource_database_type')
      this.selectType =
        res.data.find((f) => start === f.dictLabel)?.dictValue ||
        this.selectType
      res = await databaseListDatabaseAndSchema({ id: databaseId })
      this.nodeTypeOptions = res.data.data.map((f) => ({
        label: f.database,
        value: f.database
      }))

      this.schemaSelectData = res.data.data.flatMap((f) =>
        (f.schemas || []).map((v) => ({
          label: v,
          value: v
        }))
      )
      this.updateDataFields(databaseName, dataSchema)
      this.obtainTable()
    },

    updateDataFields(databaseName, dataSchema) {
      if (!databaseName && this.selectType != 1) {
        Vue.set(
          this.$props.data,
          'databaseName',
          this.nodeTypeOptions[0].value
        )
      }
      if (!dataSchema && this.selectType != 2) {
        const schemaValue =
          this.selectType == 1
            ? this.nodeTypeOptions[0].value
            : this.schemaSelectData[0]?.value
        Vue.set(this.$props.data, 'dataSchema', schemaValue)
      }
    },
    toggleSelection(rows) {
      const that = this
      if (rows) {
        this.$nextTick(() => {
          that.tableData.forEach((f) => {
            rows.forEach((row) => {
              if (
                row.table == f.name ||
                f.tableName == row.table ||
                row.name == f.name
              ) {
                that.$refs.multipleTable.toggleRowSelection(f, true)
              }
            })
          })
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    async obtainTable() {
      this.loading = true
      this.tableData = []
      const {
        databaseId,
        databaseName,
        jobType,
        dataSchema,
        taskWay,
        taskTables
      } = this.$props.data
      const dataObj = {
        id: databaseId,
        databaseName: databaseName || '',
        taskMode:
          jobType == 'EVALUATE_MIGRATION' ? 'all' : jobType.split('_')[1],
        schemaName: dataSchema || ''
      }
      if (this.selectType == 1 || this.selectType == 3) {
        dataObj.databaseName = dataSchema
      }
      const res = await databaseListObjects(dataObj)
      this.loading = false
      if (Object.keys(res.data.data).length === 0) return
      Object.keys(res.data.data).forEach((f) => {
        res.data.data[f].forEach((j) => {
          const findClassify = this.classfiy.find((k) => k.value == f)
          this.tableData.push({
            schema: databaseName || dataSchema,
            classfiy: findClassify ? findClassify.text : '',
            name: j[`${f}Name`],
            ...j
          })
        })
      })
      if (taskWay == 2) {
        Vue.set(this.$props.data, 'taskTables', this.tableData)
      }
      if (taskTables) {
        this.toggleSelection(taskTables)
      }
    },
    filterHandler(value, row, column) {
      if (value == 'all') return true
      const findClassify = this.classfiy.find((k) => k.text == row.classfiy)
      return value === findClassify.value
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  margin-top: 40px;
}
</style>
